<template>
  <!-- 轮播图 -->
  <div class="banner">
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide" v-for="(item, i) in banner" :key="i">
          <img :src="item.imgUrl" alt="" />
        </div>
      </div>
      <div class="swiper-pagination"></div>
    </div>
  </div>
</template>

<script>
import Swiper from "swiper";
import "swiper/css/swiper.css";
import { getBanner } from "../../api/Recommend";
export default {
  data() {
    return {
      banner: [],
    };
  },
  mounted() {
    getBanner()
      .then((res) => {
        this.banner = res.data;
      })
      .then(() => {
        var swiper = new Swiper(".swiper-container", {
          pagination: {
            el: ".swiper-pagination",
          },
          autoplay: {
            delay: 1500,
            stopOnLastSlide: false,
            disableOnInteraction: true,
          },
          loop: true,
        });
      });
  },
};
</script>

<style scoped>
.banner {
  height: 3.4rem;
  background-color: #fff;
}
.banner img {
  height: 3.4rem;
  width: 100%;
}
html,
body {
  position: relative;
  height: 100%;
}

body {
  background: #eee;
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 14px;
  color: #000;
  margin: 0;
  padding: 0;
}

.swiper-container {
  width: 100%;
  height: 100%;
}

.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;

  /* Center slide text vertically */
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}
.swiper-container {
  --swiper-pagination-color: #33b17b; /* 两种都可以 */
}
</style>
